<template>
  <div class="main-header-user" :style="headerRightStyle">
    <lay-dropdown>
      <div>
        <span class="main-header-user-name">{{ userNmae }}</span>
        <SvgIcon class="main-header-user-icon" type="user-bar" />
      </div>
      <template #content>
        <lay-dropdown-menu>
          <lay-dropdown-menu-item @click="user('set')">
            <SvgIcon class="user-item-icon" type="user-set" /><span>账户设置</span>
          </lay-dropdown-menu-item>
          <lay-dropdown-menu-item @click="user('logout')">
            <SvgIcon class="user-item-icon" type="logout" /><span>安全退出</span>
          </lay-dropdown-menu-item>
        </lay-dropdown-menu>
      </template>
    </lay-dropdown>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { cache } from "@/utils/cache";
import { useRouter } from "vue-router";
import { msgSuccess, msgError } from "@/utils/message";
import { logout } from "@/api/user/login";
// 读取环境配置
const AppConfig = window.AppConfig;
defineProps({
  headerRightStyle: {
    type: Object,
    default: () => {},
  },
});
const router = useRouter();
const userinfo = cache(AppConfig.BASE_API_TOKEN_NAME + "_user");
const userNmae = ref(userinfo.UserName);
const user = (type) => {
  // 账户设置
  if (type == "set") {
    router.push("/manage/updateInfo");
  }
  // 退出登录
  if (type == "logout") {
    logout().then((res) => {
      if (res.status != 200) {
        msgError(res.message);
      } else {
        msgSuccess(res.message);
      }
      cache(null);
      router.push(AppConfig.LOGIN_PATH);
    });
  }
};
</script>

<style scoped>
.main-header-user {
  font-size: 16px;
  margin-right: 40px;
  cursor: pointer;
}

.main-header-user-name {
  margin-right: 8px;
}

.main-header-user-icon {
  vertical-align: middle;
}

.user-item-icon {
  font-size: 12px;
  margin-right: 4px;
}
</style>
